<template>
  <div class="myInfo">
    <!-- 未登录 -->
    <!-- <template v-if="!userInfo"> -->
    <template v-if="userInfo">
      <div class="login-header">
        <p>欢迎使用 <span>简意</span></p>
        <p>美好生活从这里开始</p>
      </div>
      <div class="login-form">
        <van-form @submit="login">
          <van-field
            v-model="loginForm.account"
            name="账号"
            label="账号"
            placeholder="请填写账号"
            :rules="[{ required: true, message: '请填写账号' }]"
          />
          <van-field
            type="password"
            v-model="loginForm.passWord"
            name="密码"
            label="密码"
            placeholder="请填写密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
          <van-button style="margin-top: 0.2rem;" round block type="primary" native-type="login">
            登录 / 注册
          </van-button>
        </van-form>
      </div>
    </template>
    <!-- 已登录 -->
    <template v-else>
      <div class="login-header">
        <p>用户注册</p>
      </div>
      <van-form style="margin: 0 0.1rem;" @submit="login">
        <van-field
          v-model="loginForm.account"
          name="账号"
          label="账号"
          placeholder="请填写账号"
          :rules="[{ required: true, message: '请填写账号' }]"
        />
        <van-field
          type="password"
          v-model="loginForm.passWord"
          name="密码"
          label="密码"
          placeholder="请填写密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <van-button style="margin-top: 0.2rem;" round block type="primary" native-type="login">
          修改信息
        </van-button>
      </van-form>
    </template>
    <bottomBar />
  </div>
</template>
<script setup>
import { computed, ref } from "vue";
import { useStore } from "vuex";
import { useMessage } from "naive-ui";
import BottomBar from "@/components/appBase/bottomBarBase.vue"
import { sysUserLogin } from "@/api/login.api.js"

const $Message = useMessage();
const store = useStore();
const userInfo = computed(() => store.getters.appUserInfo);
store.commit("UPDATE_APP_USERINFO_EMPTY");

const loginForm = ref({
  account: "",
  passWord: ""
});

const login = () => {
  $Message.success("注册成功");
};

sysUserLogin({ username: "chanyue", "password": "123456" });

</script>
<style lang="scss" scoped>
.myInfo {
  margin: 0 auto;
  width: 7.5rem;
  display: flex;
  flex-direction: column;
  .login-header {
    padding: 0.5rem 0.3rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    color: #fff;
    background: #6936ff;
    line-height: 0.62rem;
    font-size: 0.4rem;
    font-weight: bolder;
    span {
      color: #fd0;
    }
  }
  .login-form {
    margin: 0.3rem;
  }
}
</style>